<!-- 头部 -->
<template>
  <div :id="isHome?'isHome':'isNews'" :class="[hdBgc?'headerbgc header ':'header ']" style="max-width: 100vw;position: fixed;z-index: 9999;min-width: 1200px;">
    <div v-if="isHome" class="bg-box"></div>
    <div class="flex hd-layout">
      <div class="hd_left">
        <div class="logo pointer" @click="goToHome">
          <img :src="isHome?logoImg:logoImgW" alt="" srcset="">
        </div>
        <p class="logo-sec webfont-Medium">让广告投其所好</p>
        <!-- <div class="route-box flex">
          <template v-if="isHome">
            <p class="webfont-Medium active">首页</p>
            <p class="webfont-Medium" @click="goNews">新闻中心</p>
          </template>
          <template v-else>
            <p class="webfont-Medium " @click="goHome">首页</p>
            <p class="webfont-Medium active">新闻中心</p>
          </template>

        </div> -->
      </div>

      <div class="hd_rt">
        <!-- <div v-if="!tkshow" class="user"> -->
          <div  class="user">
          <!-- <span class="sign pointer" @click="handlePush('/login?type=login')">登录</span> -->
            <!-- <span class="sign pointer" @click="open3ydta">登录</span> -->
          <!-- <span class="sign up pointer" @click="handlePush('/login?type=register')">注册</span> -->
        </div>
        <!-- <div v-else class="user">
          <span class="sign pointer" @click="intoPlat">进入投放平台</span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  mapActions
} from 'vuex'
import {
  getToken
} from '@/utils/auth.js'
import {
  getDefultPath
} from '@/utils/index.js'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据

    return {
      /* pushDis:false, */
      hdBgc: false,
      isHome: true,
      logoImg: require('@/assets/images/base/logoBule.svg'),
      logoImgW: require('@/assets/images/base/newLogoBig.svg'),
      // 国旗
      icon: 'icon-flag-us', // 选择的国旗
      // banner: this.$store.state.iconFlag.icon.zhCN, // 全部国旗
      input: '',
      input1: '',
      rg: true,
      // 黑夜/白天
      sky: false,
      day: require('@/assets/images/icon/day.png'),
      night: require('@/assets/images/icon/night.png'),
      language: [{
        name: 'Message.Simplified_Chinese',
        img: '/static/img/图层 1@2x.9842364a.png',
        icon: 'icon-flag-cn'
      },
      {
        name: 'Message.traditional_Chinese',
        img: '',
        icon: 'icon-flag-tw'
      },
      {
        name: 'Message.English',
        img: '',
        icon: 'icon-flag-us'
      },
      {
        name: 'Message.Japanese',
        img: '',
        icon: 'icon-flag-jp'
      },
      {
        name: 'Message.Korean',
        img: '',
        icon: 'icon-flag-kr'
      }
      ],
      value: '',
      show: false,
      lgimg: '/static/img/图层 1@2x.9842364a.png',
      // lgname: this.$t('Message.Simplified_Chinese'),
      tkshow: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {

  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.tkshow = getToken()
    const lang = localStorage.getItem('lang')
    // if (lang !== null) {
    //   this.handleCommand2(JSON.parse(lang))
    //   this.$store.state.selfHelp = JSON.parse(lang)
    // }
    // 在页面刷新时将vuex里的信息保存到localStorage里
    // window.addEventListener('beforeunload', () => {
    //   localStorage.setItem('lang', JSON.stringify(this.$store.state.iconFlag.lang))
    // })
    if (this.$route.path === '/home') {
      this.isHome = true
    } else {
      this.isHome = false
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 监听浏览器滚动
    const that = this
    document.documentElement.scrollTop = 0
    window.addEventListener('scroll', function(event) {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 200) {
        that.hdBgc = true
      } else {
        that.hdBgc = false
      }
    })
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    window.removeEventListener('scroll', function() {})
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    open3ydta() {
      window.open('https://login.3ydata.com/')
    },
    goToHome() {
      const path = this.$route.path
      if (path !== '/home') {
        this.goHome()
      }
    },
    goHome() {
      this.$router.replace({
        path: '/home'
      })
    },
    goNews() {
      this.$router.replace({
        path: '/news-list'
      })
    },
    handlePush(path) {
    /*  const newBridge = document.getElementById('newBridge')
      if (!newBridge) return false */
      this.$router.push({
        path
      })
    },

    async intoPlat() {
      /* const newBridge = document.getElementById('newBridge')
      if (!newBridge) return false */

      const userInfo = this.$store.state.user.userInfo
      const length = Object.keys(userInfo).length

      if (length && userInfo.roleName) {
        const path = getDefultPath(userInfo.roleName)
        this.$router.replace({
          path
        })
      } else {
        const userInfo = await this.$store.dispatch('user/getInfo')
        const path = getDefultPath(userInfo.roleName)
        this.$router.replace({
          path
        })
      }
    }

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
  @import "~@/styles/variables.scss";

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px;
    padding-bottom: 20px;
    width: 100%;
    z-index: 1001 !important;
    background-color: transparent;

    div {
      position: relative;
      z-index: 100;
    }

    .bg-box {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: #FFFFFF;
      z-index: 2;
      transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
    }

    .hd-layout {
      width: 100%;
      max-width: 1200px;
      min-width: 1200px;
      margin: 0 auto;
    }

    .hd_left {
      flex: 1;
      position: relative;
      z-index: 99999;
      width: 1030px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;

      .logo {
        margin-right: 12px;

        img {
          width: 122px;
          height: auto;
          vertical-align: middle;
        }
      }

      .logo-sec,
      .route-box p {
        font-size: 16px;
        line-height: 16px;
        color: rgba(0, 0, 0, 0.6);

        letter-spacing: 0.1em;
      }

      .route-box {
        cursor: pointer;

        p {
          &.active {
            color: $mainColor1 !important;
          }

          &:first-of-type {
            margin: 0 24px;
          }
        }
      }

    }
  }

  .hd_rt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;

    .user {
      border-radius: 4px;

      .sign {
        padding: 9px 15px;
        font-size: 14px;
        line-height: 14px;
        border-radius: 4px;
        border: 1px solid transparent;
        /* identical to box height, or 100% */
        /* 正文 */
        color: rgba(51, 64, 74, 0.8);

        &:hover {
          border-color: #ACB6C2;

        }
      }

      .up {
        margin-left: 24px;
      }

    }
  }

  .headerbgc {
    background-color: rgba(250, 250, 250, 1) !important;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.11);
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      width: 38px;
      height: 23px;
      margin-right: 24px;
      border: none;
    }
  }

  #isNews {
    .bg-box {
      background: rgba(0, 0, 0, 0.3);
    }

    &.headerbgc {
      background: rgba(0, 0, 0, 0.89) !important;
    }

    p,
    span,
    a {
      color: #FFFFFF;
    }
  }

  /* pc端小屏样式 */
  @media screen and (min-width: 1080px) and (max-width: 1240px) {
   .hd-layout{
      transform: scale(0.95);
      width: 1100px;
    }
  }
</style>
